<template>
      <div id="zs">
            <div class="title">招商加盟</div>
            <div class="subtitle">服务百万商家，专注行业解决方案，更多盈利模式</div>
            <div class="content">
                  <div class="item" v-for="(item, index) in list" :key="index">
                        <img :src="item.icon" alt="">
                        <div class="name">{{ item.name }}</div>
                        <div class="txt">
                              {{ item.txt }}
                        </div>
                  </div>
            </div>

            <div class="btn" @click="showDia">
                  立即加盟
            </div>

            <dialog-box :DialogData="DialogData" :formData="DialogData"></dialog-box>
      </div>
</template>

<script>
      import DialogBox from "@/components/Dialog"
      export default {
            data() {
                  return {
                        list: [
                              {
                                    icon: require("../../assets/img/z1.png"),
                                    name: "在线提交申请",
                                    txt: "400电话、在线沟通在线留言"
                              },
                              {
                                    icon: require("../../assets/img/z2.png"),
                                    name: "对接渠道经理",
                                    txt: "与渠道经理详细了解项目政策、盈利模式"
                              },
                              {
                                    icon: require("../../assets/img/z3.png"),
                                    name: "预约考察洽谈",
                                    txt: "亲临金控考察了解项目具体情况"
                              },
                              {
                                    icon: require("../../assets/img/z4.png"),
                                    name: "签约合作协议",
                                    txt: "与金控签署合作协议支付合作费用开通服务商管理平台"
                              },
                              {
                                    icon: require("../../assets/img/z5.png"),
                                    name: "产品及业务培训",
                                    txt: "专业讲师一对一授课全方位培训"
                              },
                              {
                                    icon: require("../../assets/img/z6.png"),
                                    name: "开拓当地市场",
                                    txt: "回到当地开展业务推广一对一客服答疑"
                              },
                        ],
                        DialogData: {
                              show: false,
                              title: "立即咨询"
                        },
                        formData: {
                              username: "",
                              telephone: ""
                        }
                  }
            },
            components: {
                  DialogBox,
            },
            methods: {
                  showDia() {
                        this.DialogData = {
                              show: true,
                              title: "立即咨询"
                        }
                        this.formData = {}
                  }
            },
      }
</script>

<style lang="scss" scoped>
#zs {
      width: 100%;
      margin-top: 80px;
      color: #fff;
      height: 532px;
      background: url("../../assets/img/zbg.png") 0 0 no-repeat;
      background-size: 100% 100%;
      padding-top: 50px;
      .title {
            font-size: 30px;
            text-align: center;
      }
      .subtitle {
            font-size: 16px;
            text-align: center;
            margin: 20px 0;
      }
      .content {
            width: 1440px;
            margin: 20px auto;
            padding-top: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item {
                  width: 200px;
                  display: flex;
                  padding-top: 20px;
                  flex-direction: column;
                  align-items: center;
                  background-color: #fff;
                  border-radius: 20px;
                  color: #000;
                  height: 200px;
                  .name {
                        margin: 10px 0;
                        font-size: 20px;
                  }
                  .txt {
                        width: 150px;
                        text-align: center;
                        font-size: 16px;
                  }
            }
      }
      .btn {
            width: 260px;
            height: 50px;
            font-size: 30px;
            line-height: 50px;
            text-align: center;
            margin: 50px auto;
            background-color: #2b40cc;
            border-radius: 10px;
      }
}
</style>